<template>
  <div class="flex flex-col h-full">
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" :model="formState">
        <a-form-item name="mcbh" label="">
          <a-input v-model:value="formState.mcbh" placeholder="科室编号/科室名称/助记码" class="w-64" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card :bordered="false" class="mt-2 flex-1" size="small">
      <div class="mb-3">
        <a-button type="primary" class="" ghost @click="onExpandAll">
          <component :is="Icon[isExpandAll ? 'CaretDownOutlined' : 'CaretRightOutlined']" /> {{ isExpandAll ? '折叠全部' : '展开全部' }}
        </a-button>
      </div>
      <BaseTable
        v-model:expanded-row-keys="expandedRowKeys"
        column-code="000090"
        :loading="loading"
        row-key="id"
        :data-source="tableData"
        bordered
        fill
        :indent-size="24"
        :scroll="{ x: 1800 }"
      >
        <template #expandIcon="{ expanded, record, onExpand }">
          <component
            :is="Icon[expanded ? 'CaretDownOutlined' : 'CaretRightOutlined']"
            v-if="record.children?.length"
            class="px-1"
            @click="onExpand(record, $event)"
          />
        </template>
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'xh'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'depositLimit'">
            <EditCell title="押金下限">
              <BaseInput v-model:value="record.depositLimit" v-input:int v-input-selection placeholder="请输入" @blur="editRow(record)" />
            </EditCell>
            <!-- <a-switch v-model:checked="record.yxzt" checked-value="0" un-checked-value="1" @change="onChangeStatus(record, $event)" /> -->
          </template>
        </template>
      </BaseTable>
    </a-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as Icon from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { post } from '@/utils/request'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'

const loading = ref(false)
const tableData = ref([])
const formRef = ref(null)
const formState = ref({})
const expandedRowKeys = ref([])
const isExpandAll = ref(false)
const getData = async () => {
  loading.value = true
  const { code, data, msg } = await post('/operation/opex/getInpDeptDepositSetList', formState.value)
  loading.value = false
  if (code !== 0) return message.error(msg)
  tableData.value = data
}

const onExpandAll = () => {
  loading.value = true
  if (isExpandAll.value) {
    isExpandAll.value = false
    expandedRowKeys.value = []
    loading.value = false
  } else {
    setTimeout(() => {
      expandedRowKeys.value = getId(tableData.value)
      isExpandAll.value = true
      loading.value = false
    }, 100)
  }
}

//递归获取所有子节点children获取id
const getId = (data) => {
  const ids = []
  data.forEach((item) => {
    ids.push(item.id)
    if (item.children) {
      ids.push(...getId(item.children))
    }
  })
  return ids
}
const editRow = async (row) => {
  row.depositLimit = row.depositLimit || 0
  const res = await post('/operation/opex/doSaveInpDeptDepositSet', row)
  if (res.code !== 0) return message.error(res.msg)
  message.success(res.msg)
  getData()
}

onMounted(() => getData())
</script>
